
<template>
  <Card class="card_style" :bordered="false" :dis-hover="true">
    <Table border :columns="columns1" :data="datalist"></Table>
    <Row v-if="loadData === true">
      <Col class="demo-spin-col" span="8" offset="8">
        <Spin fix>
          <Icon type="ios-loading" size=18 class="demo-spin-icon-load"></Icon>
          <div>数据正在加载</div>
        </Spin>
      </Col>
    </Row>
    <Page :total="totalnum" :current="currentPageNo" :page-size="currentPageSize" @on-change="change" class="page_style" show-total  show-sizer @on-page-size-change="size"/>
  </Card>
</template>

<script>
import {findcompensationdetaillist, getsalarysun} from '@/api/eventlist'

export default {
  name: 'grantmanagement',
  data () {
    return {
      modal_loading: false,
      paramData1: {},
      loadData: true,
      currentPageNo: 1,
      currentPageSize: 10,
      totalnum: 0,
      paramData: {},
      columns1: [
        { title: '所属区域', key: 'area', width: 140, align: 'center' },
        { title: '发放时间', key: 'salarytime', width: 140, align: 'center' },
        { title: '薪酬类型', key: 'type', width: 200, align: 'center' },
        { title: '应发合计', key: 'shouldpaysalary', width: 200, align: 'center' },
        { title: '实发合计', key: 'infactgrantsalary', width: 200, align: 'center' },
        { title: '操作',
          key: 'action',
          minWidth: 250,
          align: 'center',
          render: (h, params) => {
            let temp = []
            temp.push(
              h('Button', {
                props: { type: 'error', size: 'small' },
                style: { marginRight: '5px', marginTop: '2px', marginBottom: '2px' },
                on: {
                  click: () => {
                    const vm = this;
                    vm.$router.push({name: '/compensationdetail'})
                    // this.back(params.row.id)
                  }
                }
              }, '明细')
            )
            return h('div', temp)
          }
        }
      ],
      datalist: []
    }
  },
  methods: {
    init (param) {
      let that = this
      param.pageNo = that.currentPageNo
      param.pageSize = that.currentPageSize
      getsalarysun(param).then(res => {
        console.log(res)
        console.log(param)
        if (res.data.errcode === 0) {
          console.log(res)
          res.data.data.results.forEach(function (temp) {
            temp.type = '月工资'
          })
          that.datalist = res.data.data.results
          that.totalnum = res.data.data.totalRecord
          that.loadData = false
        } else {
          this.loadData = true
          this.$Notice.error({ title: '获取列表失败', desc: res.data.errmsg })
        }
      })
    },
    change (pageNo) {
      this.currentPageNo = pageNo
      let param = {
      }
      this.init(param)
    },
    size (pageSize) {
      this.currentPageSize = pageSize
      this.change()
    }
  },
  mounted () {
    let param = {
    }
    this.init(param)

  }
}
</script>
<style>
.card_style {
  height: 100%;
  width: 100%;
  overflow: hidden;
  padding: 0px;
}
.page_style {
  margin-top: 10px;
  text-align: right;
}
.bench_search {
  margin-bottom: 10px;
}
.nopadding .ivu-table-cell {
  padding: 0px 0px;
}
.code-img1 {
  height: 60%;
  width: 90%;
  margin-left: 5%;
}
.new-btn-sty {
  margin-right: 5px;
  color: #fff;
  background-color: #235CA7;
  border-color: #235CA7;
  font-weight: 500;
}
</style>
